<template>
	<div class="loginbody">
		<div class="mainBody">
			<div id="cloud1" class="cloud"></div>
			<div id="cloud2" class="cloud"></div>
		</div>
		<div class="login">
			<div class="logintop">
				<span>欢迎登录</span>
				<ul>
					<li><a href="#">回首页</a></li>
					<li><a href="#">帮助</a></li>
					<li><a href="#">关于</a></li>
				</ul>
			</div>
			<div class="login-form ">
				<div class="login-header">
					<img src="logo.svg" width="100" height="100" alt="">
					<!-- <p>{{ $Config.siteName }}</p> -->
				</div>
				<el-input placeholder="请输入用户名" suffix-icon="fa fa-user" v-model="userName" style="margin-bottom: 18px">
				</el-input>

				<el-input placeholder="请输入密码" suffix-icon="fa fa-keyboard-o" v-model="password" type="password" style="margin-bottom: 18px"
				 @keyup.native.enter="login">
				</el-input>

				<el-button type="primary" :loading="loginLoading" style="width: 100%;margin-bottom: 18px" @click.native="login">登录
				</el-button>
				<div>
					<el-checkbox v-model="Remenber"> Remenber</el-checkbox>
					<a href="javascript:;" style="float: right;color: #3C8DBC;font-size: 14px">Register</a>
				</div>

			</div>
		</div>

		<div class="loginbm">版权所有 </div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import {setUserInfo} from '../../utils/dataStorage'
	import {
		login as loginApi
	} from '../../api/system'

	export default {
		data() {
			return {
				userName: '',
				password: '',
				Remenber: true,
				loginLoading: false
			}
		},
		mounted: function() {
			var offset1 = 450;
			var offset2 = 0;
			var offsetbg = 0;
			var $body = $(".loginback");
			var $main = $(".mainBody");
			var $cloud1 = $("#cloud1");
			var $cloud2 = $("#cloud2");
			var mainwidth = $main.outerWidth();

			/// 飘动
			setInterval(function flutter() {
				if (offset1 >= mainwidth) {
					offset1 = -1200;
				}
				if (offset2 >= mainwidth) {
					offset2 = -405;
				}
				offset1 += 1;
				offset2 += 1.5;
				$cloud1.css({
					"background-position": offset1 + "px 0px",
					"opacity": "0.5"
				});
				$cloud2.css({
					"background-position": offset2 + "px 400px",
					"opacity": "0.5"
				});
			}, 40);

			setInterval(function bg() {
				if (offsetbg >= mainwidth) {
					offsetbg = -580;
				}
				offsetbg += 0.9;
				$body.css("background-position", -offsetbg + "px 0");
			}, 90);

		},
		methods: {
			login() {
				this.loginLoading = true;
				loginApi({
					userName: this.userName,
					password: this.password
				}).then(user => {
					setUserInfo(user);
					this.loginLoading = false;
					this.$router.push({
						path: '/'
					});
				}).catch(exception => {
					this.loginLoading = false;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "Login.scss";
</style>
